.portfolio-group{
  
  .modal-body{
    text-align: left;
  }

  .portfolio-item-1{
    height: 195px;
    // border-left: 1px solid #ccc;
    // padding-left: 3px;
    // padding-right: 3px;
    position: relative;
    overflow: hidden;
    &:hover{
      img{
        left: -7px;
      }
    }
    &:first-child{
      padding-left: 0px;
    }
    img{
      position: absolute;
      left: 0px;
      top: 0px;
      width: 250px;
      transition: all 0.3s;
    }
    .asside{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 40%;
      height: 100%;
      background: rgba(255, 255, 255, 0.75);
      padding-top: 35px;
      padding-left: 20px;
      z-index: 2;
      a{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
      }
      .name{
        font-size: 15px;
        text-transform: capitalize;
        font-weight: bold;
      }
      .desc{
      }
      .price{
        color: #fff;
        background: #E4393C;
        padding: 1px 3px;
      }
      .sale_price{
      }
      .btn-update{
      }
    }
  }


  .portfolio-item-2{
    text-align: center;
    vertical-align: middle;
    height: 195px;
    background: #fff;
    padding-left: 3px;
    padding-right: 3px;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    &:hover{
      border: 1px solid #999;
      img{
        padding-top: 25px
      }
      .asside{
        // height: 76px;
        // padding: 10px 10px;
      }
      .asside-actions-top{  
        // width: 100%;
      }
    }
    &:first-child{
      padding-left: 0px;
    }
    img{
      padding-top: 30px;
      max-width: 100%;
      transition: all 0.3s;
    }
    .asside{
      padding: 10px 10px;
      text-align: left;
      position: absolute;
      color: #999;
      bottom: 0;
      left: 0px;
      width: 100%;
      // height: 0px;
      transition: all 0.3s;
      .name{
        font-size: 15px;
        text-transform: capitalize;
        font-weight: bold;
      }
      .desc{
      }
      .price{
        color: #fff;
        background: #E4393C;
        padding: 1px 3px;
      }
      .sale_price{
        margin-left: 2px;
        color: #fff;
        background: #E4393C;
        padding: 1px 3px;
      }
    }
    .asside-actions-top{
      position: absolute;
      right: 0;
      top: 0;
      // width: 0px;
      height: 30px;
      text-align: right;
      overflow: hidden;
      transition: all 0.3s;
      button{
        padding: 3px 2px 0px 2px;
      }
      .btn-update{
        transition: all 0.3px;  
        color: #186D08;
        background: none;
        border: none;
        &:hover{
          color: #339620;
        }
      }
    }
  }

}